<script setup lang="ts">
// 定义商品列表项的类型接口
interface GoodsList {
  id: number;
  link: string;
  name: string;
}

// 声明 props 类型
const props = defineProps<{
  goodsList: GoodsList[];
}>();
</script>

<template>
  <nav class="nav-menu">
    <ul>
      <!-- 修正 v-for 表达式和 key 拼写 -->
      <li v-for="item in goodsList" :key="item.id">
        <a :href="item.link">{{ item.name }}</a>
      </li>
    </ul>
  </nav>
</template>

<style scoped>
.nav-menu {
  background-color: #f2f2f2;
  border-bottom: 1px solid #ccc;
}
.nav-menu ul {
  width: 1440px;
  margin: 0 auto;
  list-style: none;
  display: flex;
  justify-content: flex-start;
  height: 60px;
  align-items: flex-end;
  padding-bottom: 10px;
}
.nav-menu a {
  text-decoration: none;
  padding: 6px 20px;
  color: #333;
}
.nav-menu a:hover {
  background-color: orange;
  color: #fff;
  border-radius: 4px;
}
</style>
